<template>
    <div class="box-container" @click.stop="globalClick">
        <img ref="el" src="../assets/iconfont.png"/>
        <div style="display: flex;"> 
            <button ref="buttonRef">你好</button>
            <span ref="textRef">123</span>
        </div> 
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useElementResizable } from './resizable'

const el = ref(null)
const buttonRef = ref(null)
const textRef = ref(null)

const { calcel } = useElementResizable(buttonRef, { direction: 'both' })

const globalClick = (e) => {
    e.stopPropagation();
    calcel()
}

</script>


<style>

* {
    user-select: none;
}
.box {
    text-align: center;
    
    &:hover {
        background-color: #ccc;
        cursor: pointer;
    }
}

.box-resizable {
    position: relative;

    * {
        user-select: none;
    }
}

[class*="box-resize-"] {
    width: 8px;
    height: 8px;
    display: block;
    background-color: aquamarine;
    position: absolute;
    user-select: none;
}

.box-resize-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    cursor: ew-resize;
}

.box-resize-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    cursor: ew-resize;
}

.box-resize-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    cursor: ns-resize;
}

.box-resize-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    cursor: ns-resize;
}

.box-resize-left-top {
    left: 0;
    top: 0;
    transform: translateY(-4px) translateX(-4px);
    cursor: nwse-resize;
}

.box-resize-left-bottom {
    left: 0;
    bottom: 0;
    transform: translateY(4px) translateX(-4px);
    cursor: nesw-resize;
}

.box-resize-right-top {
    right: 0;
    top: 0;
    transform: translateY(-4px) translateX(4px);
    cursor: nesw-resize;
}

.box-resize-right-bottom {
    right: 0;
    bottom: 0;
    transform: translateY(4px) translateX(4px);
    cursor: nwse-resize;
}

.box-container {
    width: 1000px;
    height: 800px;
    background-color: #ccc;
}

</style>
